<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img
                src="https://chengqige-7gunki87efeca981-1302748923.tcloudbaseapp.com/1024/2.jpg"/>
        </div>
        <div class="swiper-slide">
          <img
                src="https://chengqige-7gunki87efeca981-1302748923.tcloudbaseapp.com/1024/6.jpg"/>
        </div>
        <div class="swiper-slide">
          <img
                src="https://chengqige-7gunki87efeca981-1302748923.tcloudbaseapp.com/1024/12.jpg"/>
        </div>
        <div class="swiper-slide">
          <img
                src="https://chengqige-7gunki87efeca981-1302748923.tcloudbaseapp.com/1024/7.jpg"/>
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
  </div>
</template>

<script>
// import Swiper JS
import Swiper from "swiper";
// import Swiper styles
import "swiper/css/swiper.min.css";
import axios from "axios";

export default {
  name: "Banner",
  data(){
    imgs:[]
  },
  created(){
    axios({
      url:""
    })
  },
  
  mounted:function(){
    const swiper = new Swiper(".swiper-container",{
      loop:true,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  }
};
</script>

<style scoped>
.swiper-container {
  width: 100%;
  height: 160px;
  background-color: skyblue;
}

.swiper-slide,img{
  width: 100%;
  height:100%
}
</style>